<template>
	<div class="updateArticle">
		<div class="by">
			<div class="meteor" :style="`transform:rotate(${40}deg)`">
				<div class="line" :style="`animationDelay:${1.5}s;width:${2}px;height:${100}px;`"></div>
				<div class="line" :style="`animationDelay:${5}s;width:${1}px;height:${100}px;`"></div>
			</div>
			<div class="meteors" :style="`transform:rotate(${45}deg)`">
				<div class="lines" :style="`animationDelay:${3.5}s;width:${2}px;height:${100}px;`"></div>
			</div>
			<div class="meteort" :style="`transform:rotate(${50}deg)`">
				<div class="linet" :style="`animationDelay:${2.5}s;width:${2}px;height:${100}px;`"></div>
				<div class="linet" :style="`animationDelay:${5}s;width:${1}px;height:${100}px;`"></div>
			</div>

			<div class="conter">
				<div class="markdown-body" style="margin-top: 200px;">
					<div class="title">
						<el-input placeholder="请输入文章标题" v-model="articleForm.title"></el-input>
					</div>
					<div id="placeholder" style="visibility: hidden;height: 0px;display: none;"></div>
					<Markdown :editor="articleForm.editor" class="me-write-editor"></Markdown>

					<div class="relevance">
						<el-form :model="articleForm" ref="articleForm" :rules="rules">
							<el-form-item prop="summary">
								<el-input type="textarea" v-model="articleForm.summary" :rows="6" placeholder="请输入摘要">
								</el-input>
							</el-form-item>
							<el-form-item label="文章分类:" prop="category">
								<el-select v-model="articleForm.category" value-key="id" placeholder="请选择文章分类">
									<el-option v-for="c in categorys" :key="c.id" :label="c.categoryName"
										:value="c.categoryName">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="文章标签:" prop="tags">
								<el-checkbox-group v-model="articleForm.tags">
									<el-checkbox v-for="t in tags" :key="t.id" :label="t.id" name="tags">{{t.tagName}}
									</el-checkbox>
								</el-checkbox-group>
							</el-form-item>

							<el-form-item label="个人隐私:">
								<el-checkbox v-model="isComments">是否也许评论</el-checkbox>
								<el-checkbox v-model="isShow">是否公开</el-checkbox>
							</el-form-item>
						</el-form>
					</div>

					<div class="btn">
						<br>
						<el-button size="mini" type="primary" @click="updateArticle('articleForm')">修改</el-button>
						<el-button size="mini" type="primary" @click="$router.go(-1)">返回</el-button>
					</div>
				</div>
			</div>
		</div>
		<el-backtop :bottom="100" />
	</div>
</template>

<script>
	import Markdown from '../../components/Markdown/MarkdownEditor.vue'
	import $ from 'jquery'
	export default {
		components: {
			Markdown
		},
		data() {
			return {
				articleForm: {
					id: '',
					title: '',
					summary: '',
					category: '',
					tags: [],
					editor: {
						value: '',
						ref: '', //保存mavonEditor实例  实际不该这样
						default_open: 'edit',
						toolbars: {
							bold: true, // 粗体
							italic: true, // 斜体
							header: true, // 标题
							underline: true, // 下划线
							strikethrough: true, // 中划线
							mark: true, // 标记
							superscript: true, // 上角标
							subscript: true, // 下角标
							quote: true, // 引用
							ol: true, // 有序列表
							ul: true, // 无序列表
							link: true, // 链接
							imagelink: true, // 图片链接
							code: true, // code
							table: true, // 表格
							fullscreen: true, // 全屏编辑
							readmodel: true, // 沉浸式阅读
							htmlcode: true, // 展示html源码
							help: true, // 帮助
							/* 1.3.5 */
							undo: true, // 上一步
							redo: true, // 下一步
							trash: true, // 清空
							save: true, // 保存（触发events中的save事件）
							/* 1.4.2 */
							navigation: true, // 导航目录
							/* 2.1.8 */
							alignleft: true, // 左对齐
							aligncenter: true, // 居中
							alignright: true, // 右对齐
							/* 2.2.1 */
							subfield: true, // 单双栏模式
							preview: true, // 预览
						}
					}
				},
				categorys: [],
				tags: [],
				isComments: false,
				isShow: false,
				rules: {
					summary: [{
							required: true,
							message: '请输入摘要',
							trigger: 'blur'
						},
						{
							max: 80,
							message: '不能大于80个字符',
							trigger: 'blur'
						}
					],
					category: [{
						required: true,
						message: '请选择文章分类',
						trigger: 'change'
					}],
					tags: [{
						type: 'array',
						required: true,
						message: '请选择标签',
						trigger: 'change'
					}],
				}

			};
		},
		mounted() {
			this.editorToolBarToFixedWrapper = this.$_.throttle(this.editorToolBarToFixed, 100)
			window.addEventListener('scroll', this.editorToolBarToFixedWrapper, false);



			// this.clickWrapper = this.$_.throttle(this.clickBoot, 100)
			// window.addEventListener('click', this.clickBoot, false);
			this.getBody(this.$route.query.Bid)
			this.getTagList()
			this.getCategoryList()
			this.$nextTick(() => {
				$(".v-left-item").append("<i class='el-icon-caret-bottom'  title='置底'></i>")
				$(".el-icon-caret-bottom").click(() => {
					$('html, body').animate({
						scrollTop: $(document).height()
					}, 500);
				})
			})
		},
		beforeDestroy() {
			window.removeEventListener('scroll', this.editorToolBarToFixedWrapper, false)
			window.addEventListener('click', this.clickWrapper, false);
		},
		methods: {
			editorToolBarToFixed() {
				let toolbar = document.querySelector('.v-note-op');
				let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
				if (curHeight >= 160) {
					document.getElementById("placeholder").style.display = "block"; //bad  用计算属性较好
					toolbar.classList.add("me-write-toolbar-fixed");
				} else {
					document.getElementById("placeholder").style.display = "none";
					toolbar.classList.remove("me-write-toolbar-fixed");
				}
			},
			getTagList() {
				this.$api.write.getMyTag(this.$store.state.UserInfo.id).then(res => {
					if (res.code == 200) {
						this.tags = res.data
					}
				})
			},
			getCategoryList() {
				this.$api.write.getMyCategory(this.$store.state.UserInfo.id).then(res => {
					if (res.code == 200) {
						this.categorys = res.data
					}
				})
			},
			// 获取修改内容
			getBody(id) {
				this.$api.detail.getDateil(id).then(res => {
					if (res.code == 200) {
						// $(".v-left-item").append("<i class='el-icon-caret-bottom'  title='置底'></i>")
						this.articleForm.title = res.data.title
						this.articleForm.summary = res.data.summary
						this.articleForm.editor.value = res.data.body.content
						this.articleForm.category = res.data.categorys[0].categoryName
						res.data.tags.forEach(item => {
							this.articleForm.tags.push(item.id)
						})
						this.articleForm.id = res.data.id
						if (res.data.isComment == 1) {
							this.isComments = true
						}
						if (res.data.isShow == 1) {
							this.isShow = true
						}
					}
				})
			},
			updateArticle(articleForm) {
				if (!this.articleForm.title) {
					this.$message({
						message: '标题不能为空哦',
						type: 'warning',
						showClose: true
					})
					return
				}
				if (this.articleForm.title.length > 30) {
					this.$message({
						message: '标题不能大于30个字符',
						type: 'warning',
						showClose: true
					})
					return
				}
				if (!this.articleForm.editor.ref.d_render) {
					this.$message({
						message: '内容不能为空哦',
						type: 'warning',
						showClose: true
					})
					return
				}

				this.$refs[articleForm].validate((valid) => {
					if (valid) { //检验通过整理数据
						let tags = this.articleForm.tags.map(function(item) {
							return {
								id: item
							};
						});
						let categoryName = this.articleForm.category
						console.log(categoryName);

						let params = {
							body: {
								content: this.articleForm.editor.value,
								contentHtml: this.articleForm.editor.ref.d_render
							},
							category: null,
							id: this.articleForm.id,
							isComment: this.isComments == false ? 0 : 1,
							isShow: this.isShow == false ? 0 : 1,
							summary: this.articleForm.summary,
							tags: tags,
							title: this.articleForm.title
						}
						this.categorys.forEach(item => {
							if (item.categoryName == categoryName) {
								params.category = {
									id: item.id
								}
							}
						})
						this.$api.write.updateArticle(params, this.$store.state.token).then(res => {
							console.log(res);
							if (res.code == 200) {
								this.$message.success("修改成功！")
								// 跳转到原来的文章
								// this.$router.push(`/myArticle/${this.$store.state.UserInfo.id}`)
								this.$router.push(`/articleDetail/${this.$route.query.Bid}`)
							} else {
								this.$message.error("出现错误！")
							}
						})

					} else {
						return false;
					}
				});
			}
		},
	};
</script>

<style lang="less" scoped>
	.conter {
		width: 1250px;
		height: auto;
		margin: 0px auto;
		border: 1px solid transparent;
		z-index: 10000;
		position: relative;

		/deep/ .el-icon-caret-bottom {
			// background-color: ;
			color: #00d0ff;
			font-size: 20px;
		}

		// 关联部分
		.relevance {
			height: 350px;
			width: 100%;
			border-top: 1px solid gainsboro;
			background-color: white;
			padding: 10px;
		}


		.markdown-body {
			width: 100%;
			min-height: 500px;
			padding-bottom: 50px;

			.btn {
				// height: 100%;
				width: 100%;
				background-color: white;
				padding-top: 30px;
				padding-bottom: 10px;
				padding-left: 5px;
			}

		}

		/deep/ .markdown-body * {
			border-radius: 0;
		}


		.me-write-editor {
			min-height: 500px !important;
		}

		.me-header-left {
			margin-top: 10px;
		}

		.me-title img {
			max-height: 2.4rem;
			max-width: 100%;
		}

		/deep/ .me-write-toolbar-fixed {
			position: fixed;
			width: 1250px !important;
			top: 0px;
		}

		.v-note-op {
			box-shadow: none !important;
		}

		.auto-textarea-input,
		.auto-textarea-block {
			font-size: 18px !important;
		}
	}

	.by {
		background: url("https://blog-chen.oss-cn-shanghai.aliyuncs.com/1a55c797db8d42548da8308b74c67aab.png") no-repeat;
		width: 100%;
		min-height: 100vh;
		background-size: 100% 100%;
		background-attachment: fixed;
		position: relative;
		z-index: 4;
	}

	.login-conter {
		width: 1250px;
		margin: 0 auto;
		height: 100vh;
		// border: 1px solid red;
	}

	.form {
		height: 520px;
		width: 400px;
		background-color: rgba(0, 0, 0, 0.13);
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		border-radius: 10px;
		backdrop-filter: blur(10px);
		border: 2px solid rgba(255, 255, 255, 0.09);
		box-shadow: 0 0 40px rgba(20, 18, 42, 0.6);
		padding: 50px 35px;
	}


	.social {
		margin-top: 30px;
		display: flex;
	}

	.social div {
		background: red;
		width: 150px;
		line-height: 15px;
		border-radius: 3px;
		padding: 5px 10px 10px 5px;
		background-color: rgba(255, 255, 255, 0.27);
		color: #eaf0fb;
		text-align: center;
	}

	.social div:hover {
		background-color: rgba(255, 255, 255, 0.47);
	}

	.social .co {
		margin-left: 25px;
	}

	.social i {
		margin-right: 4px;
	}

	::placeholder {
		color: #e5e5e5;
	}

	.fb {
		margin-left: 71px;
	}

	.meteor {
		width: 2px;
		height: 200px;
		position: relative;
		margin: 0 auto;
		float: left;
		margin-left: 300px;

		// overflow: hidden;
		.line {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}

	.me-write-toolbar-fixed {
		position: fixed;
		width: 700px !important;
		top: 60px;
	}


	.meteors {
		width: 2px;
		height: 200px;
		position: relative;
		margin: 0 auto;
		float: left;
		margin-left: 500px;

		// overflow: hidden;
		.lines {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}


	.meteort {
		width: 2px;
		height: 200px;
		position: relative;
		float: right;
		margin-right: 300px;

		// overflow: hidden;
		.linet {
			animation: meteoring 6s infinite linear;
			position: absolute;
			width: 2px;
			height: 200px;
			background: linear-gradient(to top,
					rgb(2, 161, 195, 1),
					rgba(11, 36, 66, 0.1));
			border-radius: 2px;
			box-shadow: 0px 10px 20px 0px #02a1c3;
			opacity: 0;

			&::before {
				width: 2px;
				height: 2px;
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				border-radius: 50%;
				background: #00d0ff;
				box-shadow: 0px 0px 12px 5px #00d0ff;
			}
		}
	}

	@keyframes meteoring {
		0% {
			opacity: 0;
			top: -250px;
		}

		25% {
			opacity: 0.5;
			top: 0px;
		}

		50% {
			opacity: 0.8;
			top: 250px;
		}

		75% {
			opacity: 1;
			top: 500px;
		}

		100% {
			opacity: 0;
			top: 750px;
		}
	}
</style>
